<template>
  <div class="hospital-ratio-container">
    <div class="main-content">
      <!-- 左侧区域 -->
      <div class="left-section">
        <div class="left-header">
          <el-icon><Document /></el-icon>
          <span>一级医院费用阶梯表</span>
        </div>
        
        <div class="action-bar">
          <el-button type="primary" plain @click="handleAdd" class="add-button">
            <el-icon class="el-icon--left"><Plus /></el-icon>新增
          </el-button>
        </div>
        
        <el-table 
          :data="ratioList" 
          border 
          class="ratio-table"
          @row-click="handleRowClick"
          highlight-current-row
          :row-key="row => row.id"
          ref="ratioTable">
          <el-table-column prop="startAmount" label="起付线" />
          <el-table-column prop="endAmount" label="等级线" />
          <el-table-column label="人员类别">
            <template #default="scope">
              <span>{{ scope.row.personType }}</span>
            </template>
          </el-table-column>
          <el-table-column label="报销比例">
            <template #default="scope">
              <span>{{ scope.row.ratio }} %</span>
            </template>
          </el-table-column>
          <el-table-column label="状态">
            <template #default="scope">
              <span class="status-text">{{ scope.row.statusText }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="danger" circle @click.stop="handleDelete(scope.row)">
                <el-icon><Delete /></el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 右侧区域 -->
      <div class="right-section">
        <template v-if="form.id">
          <div class="right-header">
            <div class="tabs-container">
              <div class="detail-tab">
                <span>详细信息</span>
              </div>
              <div class="current-level">{{ form.personType }}</div>
            </div>
          </div>

          <div class="form-container">
            <el-form :model="form" label-position="left" label-width="80px">
              <el-form-item label="起付线" required>
                <div class="amount-input">
                  <el-input v-model.number="form.startAmount" placeholder="0">
                    <template #append>元</template>
                  </el-input>
                </div>
              </el-form-item>
              
              <el-form-item label="等级线" required>
                <div class="amount-input">
                  <el-input v-model.number="form.endAmount" placeholder="0">
                    <template #append>元</template>
                  </el-input>
                </div>
              </el-form-item>
              
              <el-form-item label="人员类别" required>
                <el-radio-group v-model="form.personType">
                  <el-radio label="在职人员">在职人员</el-radio>
                  <el-radio label="退休人员">退休人员</el-radio>
                </el-radio-group>
              </el-form-item>
              
              <el-form-item label="报销比例" required>
                <div class="ratio-input">
                  <el-button @click="decreaseRatio">-</el-button>
                  <el-input v-model.number="form.ratio" placeholder="0" />
                  <el-button @click="increaseRatio">+</el-button>
                  <span class="ratio-unit">%</span>
                </div>
              </el-form-item>
              
              <el-form-item label="状态">
                <div class="status-options">
                  <el-radio-group v-model="form.statusValue">
                    <el-radio :label="true" class="status-radio-item">正常</el-radio>
                    <el-radio :label="false" class="status-radio-item">停用</el-radio>
                  </el-radio-group>
                </div>
              </el-form-item>
              
              <el-form-item>
                <div class="form-buttons">
                  <el-button type="primary" @click="submitForm">修改</el-button>
                  <el-button @click="resetForm">重置</el-button>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </template>
      </div>
    </div>

    <!-- 新增对话框 -->
    <el-dialog v-model="dialogVisible" title="新增一级医院报销比例" width="30%">
      <el-form :model="newForm" label-width="100px">
        <el-form-item label="起付线" required>
          <div class="amount-input">
            <el-input v-model.number="newForm.startAmount" placeholder="0">
              <template #append>元</template>
            </el-input>
          </div>
        </el-form-item>
        
        <el-form-item label="等级线" required>
          <div class="amount-input">
            <el-input v-model.number="newForm.endAmount" placeholder="0">
              <template #append>元</template>
            </el-input>
          </div>
        </el-form-item>
        
        <el-form-item label="人员类别" required>
          <el-radio-group v-model="newForm.personType">
            <el-radio label="在职人员">在职人员</el-radio>
            <el-radio label="退休人员">退休人员</el-radio>
          </el-radio-group>
        </el-form-item>
        
        <el-form-item label="报销比例" required>
          <div class="ratio-input">
            <el-button @click="newDecreaseRatio">-</el-button>
            <el-input v-model.number="newForm.ratio" placeholder="0" style="width: 80px;" />
            <el-button @click="newIncreaseRatio">+</el-button>
            <span class="ratio-unit">%</span>
          </div>
        </el-form-item>
        
        <el-form-item label="状态" required>
          <div class="status-options">
            <el-radio-group v-model="newForm.statusValue">
              <el-radio :label="true" class="status-radio-item">正常</el-radio>
              <el-radio :label="false" class="status-radio-item">停用</el-radio>
            </el-radio-group>
          </div>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addNewRatio">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { Document, Delete, Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'HospitalLevelOneRatio',
  components: {
    Document,
    Delete,
    Plus
  },
  data() {
    return {
      ratioList: [
        { id: 1, startAmount: 1300, endAmount: 30000, personType: '退休人员', ratio: 95, statusValue: true, statusText: '启用' },
        { id: 2, startAmount: 30000, endAmount: 40000, personType: '退休人员', ratio: 97, statusValue: true, statusText: '启用' },
        { id: 3, startAmount: 40000, endAmount: 100000, personType: '退休人员', ratio: 99, statusValue: true, statusText: '启用' },
        { id: 4, startAmount: 100000, endAmount: 300000, personType: '退休人员', ratio: 90, statusValue: true, statusText: '启用' },
        { id: 5, startAmount: 1300, endAmount: 30000, personType: '在职人员', ratio: 90, statusValue: true, statusText: '启用' },
        { id: 6, startAmount: 30000, endAmount: 40000, personType: '在职人员', ratio: 94, statusValue: true, statusText: '启用' },
        { id: 7, startAmount: 40000, endAmount: 100000, personType: '在职人员', ratio: 98, statusValue: true, statusText: '启用' },
        { id: 8, startAmount: 100000, endAmount: 300000, personType: '在职人员', ratio: 90, statusValue: true, statusText: '启用' }
      ],
      dialogVisible: false,
      form: {
        id: 1,
        startAmount: 1300,
        endAmount: 30000,
        personType: '退休人员',
        ratio: 95,
        statusValue: true,
        statusText: '启用'
      },
      newForm: {
        startAmount: 0,
        endAmount: 0,
        personType: '在职人员',
        ratio: 0,
        statusValue: true,
        statusText: '启用'
      },
      // 添加当前选中行的索引
      currentRowIndex: 0
    }
  },
  // 添加keep-alive激活时的钩子
  activated() {
    console.log('HospitalLevelOneRatio组件被激活');
    // 确保有选中的行
    this.initSelectedRow();
    // 设置表格当前行
    this.setTableCurrentRow();
  },
  // 组件创建时
  created() {
    console.log('HospitalLevelOneRatio组件已创建');
    // 初始化数据
    if (this.ratioList.length > 0) {
      this.form = JSON.parse(JSON.stringify(this.ratioList[0]));
      // 确保状态值正确设置
      if (this.form.statusValue === undefined) {
        this.form.statusValue = this.form.statusText === '启用';
      }
    }
  },
  // 组件挂载时
  mounted() {
    console.log('HospitalLevelOneRatio组件已挂载');
    // 设置表格当前行
    this.setTableCurrentRow();
    // 确保状态值正确设置
    if (this.form.statusValue === undefined) {
      this.form.statusValue = this.form.statusText === '启用';
    }
  },
  methods: {
    // 设置表格当前行
    setTableCurrentRow() {
      this.$nextTick(() => {
        if (this.ratioList.length > 0 && this.$refs.ratioTable) {
          const row = this.ratioList[this.currentRowIndex];
          if (row) {
            this.$refs.ratioTable.setCurrentRow(row);
          }
        }
      });
    },
    
    // 初始化选中行的方法
    initSelectedRow() {
      if (this.ratioList.length > 0) {
        // 如果form已经有id，说明之前选过，尝试找到对应行
        if (this.form.id) {
          const index = this.ratioList.findIndex(item => item.id === this.form.id);
          if (index !== -1) {
            this.currentRowIndex = index;
            this.form = JSON.parse(JSON.stringify(this.ratioList[index]));
            // 确保状态值正确设置
            if (this.form.statusValue === undefined) {
              this.form.statusValue = this.form.statusText === '启用';
            }
          } else {
            // 如果找不到之前选中的行，则默认选第一行
            this.currentRowIndex = 0;
            this.form = JSON.parse(JSON.stringify(this.ratioList[0]));
            // 确保状态值正确设置
            if (this.form.statusValue === undefined) {
              this.form.statusValue = this.form.statusText === '启用';
            }
          }
        } else {
          // 没有选过，默认选第一行
          this.currentRowIndex = 0;
          this.form = JSON.parse(JSON.stringify(this.ratioList[0]));
          // 确保状态值正确设置
          if (this.form.statusValue === undefined) {
            this.form.statusValue = this.form.statusText === '启用';
          }
        }
      }
    },
    
    // 处理行点击
    handleRowClick(row) {
      const index = this.ratioList.findIndex(item => item.id === row.id);
      if (index !== -1) {
        this.currentRowIndex = index;
      }
      this.form = JSON.parse(JSON.stringify(row));
      // 确保状态值正确设置
      if (this.form.statusValue === undefined) {
        this.form.statusValue = this.form.statusText === '启用';
      }
      // 设置当前行高亮
      if (this.$refs.ratioTable) {
        this.$refs.ratioTable.setCurrentRow(row);
      }
    },
    
    // 处理新增
    handleAdd() {
      this.newForm = {
        startAmount: 0,
        endAmount: 0,
        personType: '在职人员',
        ratio: 0,
        statusValue: true,
        statusText: '启用'
      }
      this.dialogVisible = true
    },
    
    // 处理删除
    handleDelete(row) {
      ElMessageBox.confirm('确认删除该报销比例?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 模拟删除操作
        const index = this.ratioList.findIndex(item => item.id === row.id)
        if (index !== -1) {
          this.ratioList.splice(index, 1)
        }
        ElMessage({
          type: 'success',
          message: '删除成功'
        })
        
        // 如果删除的是当前选中项，重置表单
        if (this.form.id === row.id) {
          this.resetForm()
          // 设置新的当前行
          this.$nextTick(() => {
            if (this.ratioList.length > 0 && this.$refs.ratioTable) {
              const newRow = this.ratioList[this.currentRowIndex];
              if (newRow) {
                this.$refs.ratioTable.setCurrentRow(newRow);
              }
            }
          });
        }
      }).catch(() => {
        // 取消删除
      })
    },
    
    // 减少比例
    decreaseRatio() {
      if (this.form.ratio > 0) {
        this.form.ratio -= 1
      }
    },
    
    // 增加比例
    increaseRatio() {
      if (this.form.ratio < 100) {
        this.form.ratio += 1
      }
    },
    
    // 新增表单减少比例
    newDecreaseRatio() {
      if (this.newForm.ratio > 0) {
        this.newForm.ratio -= 1
      }
    },
    
    // 新增表单增加比例
    newIncreaseRatio() {
      if (this.newForm.ratio < 100) {
        this.newForm.ratio += 1
      }
    },
    
    // 提交表单
    submitForm() {
      if (!this.form.startAmount || !this.form.endAmount || this.form.ratio === '') {
        ElMessage.warning('请填写完整信息')
        return
      }
      
      // 更新状态文本
      this.form.statusText = this.form.statusValue ? '启用' : '停用'
      
      // 更新数据
      const index = this.ratioList.findIndex(item => item.id === this.form.id)
      if (index !== -1) {
        this.ratioList[index] = JSON.parse(JSON.stringify(this.form))
      }
      ElMessage.success('更新成功')
    },
    
    // 提交新增表单
    addNewRatio() {
      if (!this.newForm.startAmount || !this.newForm.endAmount || this.newForm.ratio === '') {
        ElMessage.warning('请填写完整信息')
        return
      }
      
      // 更新状态文本
      this.newForm.statusText = this.newForm.statusValue ? '启用' : '停用'
      
      const newId = this.ratioList.length > 0 ? Math.max(...this.ratioList.map(item => item.id)) + 1 : 1
      const newItem = {
        ...this.newForm,
        id: newId
      }
      this.ratioList.push(newItem)
      this.dialogVisible = false
      ElMessage.success('添加成功')
      
      // 选中新添加的行
      this.form = JSON.parse(JSON.stringify(newItem))
      this.currentRowIndex = this.ratioList.length - 1;
      
      // 设置新行为当前行
      this.$nextTick(() => {
        if (this.$refs.ratioTable) {
          this.$refs.ratioTable.setCurrentRow(newItem);
        }
      });
    },
    
    // 重置表单
    resetForm() {
      if (this.ratioList.length > 0) {
        this.currentRowIndex = 0;
        this.form = JSON.parse(JSON.stringify(this.ratioList[0]))
        
        // 设置第一行为当前行
        this.$nextTick(() => {
          if (this.$refs.ratioTable) {
            this.$refs.ratioTable.setCurrentRow(this.ratioList[0]);
          }
        });
      } else {
        this.form = {
          id: null,
          startAmount: 0,
          endAmount: 0,
          personType: '在职人员',
          ratio: 0,
          statusValue: true,
          statusText: '启用'
        }
      }
    }
  }
}
</script>

<style scoped>
.hospital-ratio-container {
  padding: 20px;
}

.main-content {
  display: flex;
  gap: 20px;
}

.left-section {
  width: 50%;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.right-section {
  width: 50%;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.left-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid #EBEEF5;
}

.left-header span {
  margin-left: 8px;
  font-weight: bold;
  font-size: 16px;
}

.right-header {
  border-bottom: 1px solid #EBEEF5;
}

.tabs-container {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 20px;
}

.detail-tab {
  padding: 15px 0;
  font-size: 14px;
  color: #409EFF;
  border-bottom: 2px solid #409EFF;
}

.current-level {
  position: absolute;
  right: 20px;
  color: #67C23A;
  font-weight: bold;
}

.action-bar {
  padding: 15px 20px;
}

.add-button {
  border-radius: 4px;
}

.ratio-table {
  width: 100%;
}

.form-container {
  padding: 20px;
}

.ratio-input {
  display: flex;
  align-items: center;
}

.ratio-input .el-input {
  margin: 0 10px;
  width: 80px;
}

.ratio-unit {
  margin-left: 5px;
  color: #606266;
}

.amount-input {
  width: 200px;
}

.form-buttons {
  display: flex;
  gap: 10px;
}

/* 状态文本样式 */
.status-text {
  color: #67C23A;
  font-size: 14px;
}

/* 状态单选按钮样式 */
.status-options {
  display: flex;
  gap: 20px;
}

.status-radio-item {
  margin-right: 20px;
}

/* 确保单选按钮正确显示 */
:deep(.el-radio) {
  margin-right: 20px;
  height: 32px;
  line-height: 32px;
}

:deep(.el-radio__input) {
  display: inline-block;
  vertical-align: middle;
}

:deep(.el-radio__label) {
  padding-left: 8px;
}

/* 自定义必填项的样式，与截图匹配 */
:deep(.el-form-item.is-required .el-form-item__label::before) {
  content: '*';
  color: #F56C6C;
  margin-right: 4px;
}

/* 定制表格样式 */
:deep(.el-table) {
  --el-table-border-color: #EBEEF5;
}

:deep(.el-table td) {
  padding: 8px 0;
}

:deep(.el-table .cell) {
  padding: 0 12px;
  text-align: center;
}

/* 定制tabs样式 */
:deep(.el-tabs__header) {
  margin-bottom: 0;
}

:deep(.el-tabs__nav-wrap::after) {
  height: 0;
}

:deep(.el-tabs__active-bar) {
  background-color: #409EFF;
}

:deep(.el-tabs__item.is-active) {
  color: #409EFF;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  background-color: #f5f7fa;
}
</style> 